<template>
  <div class="innerPageTable-out-flex">
    <NameSpace @clickNamespace="clickNamespace"></NameSpace>
    <SelfAdaption>
      <Form
        :model="formSearch"
        ref="formRef"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
        :show-message="formSearch.queryType === '0'"
      >
        <Form-item prop="queryType" label="查询维度">
          <Select v-model="formSearch.queryType">
            <Option v-for="item in queryTypeList" :value="item.id" :key="item.id">{{ item.label }}</Option>
          </Select>
        </Form-item>
        <template v-if="formSearch.queryType === '1'">
          <Form-item prop="ip" label="IP" :rules="{ required: false }" key="ipform">
            <Input type="text" v-model.trim="formSearch.ip" @on-enter="searchInfo" key="ip"></Input>
          </Form-item>
        </template>
        <template v-if="formSearch.queryType === '0'">
          <Form-item
            prop="dataId"
            label="Data ID"
            :rules="{ required: true, message: 'Data ID不能为空', trigger: 'blur' }"
            key="dataIdform"
          >
            <Input type="text" v-model.trim="formSearch.dataId" @on-enter="searchInfo" key="dataId" placeholder="添加通配符'*'进行模糊查询"></Input>
          </Form-item>
          <Form-item
            key="groupform"
            prop="group"
            label="Group"
            :rules="{ required: true, message: 'Group不能为空', trigger: 'blur' }"
          >
            <Input type="text" v-model.trim="formSearch.group" @on-enter="searchInfo" key="group" placeholder="添加通配符'*'进行模糊查询"></Input>
          </Form-item>
        </template>
        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" @click="searchInfo" />
          <RPButton optType="reset" @click="formReset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="tableRef" :config="pageTableConfig" v-if="isShowTable"> </InnerPageTable>
  </div>
</template>

<script>
import API from "@/api/monitorQuery";
import { generateColumns } from "./colomns";
export default {
  name: "monitorQueryIndex",
  components: {},
  props: {},
  data() {
    return {
      isShowTable: true,
      queryTypeList: [
        {
          id: "0",
          label: "配置"
        },
        {
          id: "1",
          label: "IP"
        }
      ],
      formSearch: {
        queryType: "0",
        dataId: "",
        group: "",
        namespaceId: "",
        ip: ""
      },
      pageTableConfig: {
        resource: [],
        columns: generateColumns["0"],
        autoFirst: false
      }
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  watch: {
    "formSearch.queryType"(val) {
      this.pageTableConfig.columns = generateColumns[val];
      this.updateTable();
    }
  },
  methods: {
    init() {
      if (Object.keys(this.$route.query).length) {
        for (let key of Object.keys(this.$route.query)) {
          this.formSearch[key] = this.$route.query[key];
        }
        this.$nextTick(() => {
          this.searchInfo();
        });
      }
    },
    clickNamespace(val) {
      this.formSearch.namespaceId = val;
    },
    updateTable() {
      this.isShowTable = false;
      this.$nextTick(() => {
        this.isShowTable = true;
      });
    },
    getListPage() {
      API.getListPage(this.formSearch).then(data => {
        this.$refs["tableRef"].resource = data || [];
        this.$refs["tableRef"].loadLocal();
      });
    },
    // 搜索查询
    searchInfo() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.getListPage();
        }
      });
    },
    // 搜索重置
    formReset() {
      this.formSearch = {
        ...this.formSearch,
        dataId: "",
        group: "",
        ip: ""
      };
      this.$refs["tableRef"].resource = [];
      this.$refs["tableRef"].loadLocal();
    }
  },
  computed: {
    groupList() {
      let list = this.dataList.map(item => item.group);
      return [...new Set(list)];
    }
  }
};
</script>

<style lang='less' scoped >
</style>
